<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1944826_uhdd4fy98z.css">
    <link rel="stylesheet" href="./index.css">
  
</head>
<body>
    <div class="box" v-cloak>
        <div class="me_nav">
            <div class="me_navb">
                <div class="nav">
                    <div><img style="width: 150px;height: 27px;" src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvMDdlNTU2NmQ3YjA1OGM2OWQxNmVlNDQ1N2MzMjA0ODkucG5n.png" alt=""></div>
                    <ul> <span><router-link to="/" style="color: #f0437d;">首页</router-link></span><span><router-link to="./no2">关于</router-link></span><span> <router-link to="./no3">新闻</router-link></span><span><router-link to="./no4">联系</router-link></span></ul>
                    <div><i class="iconfont icon-fangdajing"></i></div>
                </div>
            </div>
        </div>
        
        <router-view></router-view>
        <!--  -->
        <div class="foot">
            <div class="me_foot">
                <div>
                    <div><img style="width: 140px;height: 25px;" src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvZDY1OTI2ODhlOGU1OTg4ZGJlN2JmMzgzMGQxMjQ3ZmYtMTQweDI1LnBuZw_p_p100_p_3D_p_p100_p_3D.png" alt=""></div>
                    <div><span>Copyright  © 2019  软件公司模板 苏ICP备0900000001号-3</span></div>
                    <div><span><i class="inco el-icon-s-order"></i></span>
                        <span><i class="inco el-icon-s-order"></i></span>
                        <span><i class="inco el-icon-s-order"></i></span>
                        <span><i class="inco el-icon-s-order"></i></span>
                    </div>
                </div>
                <div class="me_footys">
                        <h5>联系我们</h5>
                        <p>电话：+86 123 1234 1234</p>
                        <p>邮箱：software@email.com</p>
                        <p>地址：深圳市南京路双港码头6楼</p>
                    
                </div>
                <div class="me_footys">
                    <h5>帮助中心</h5>
                    <p>关于我们</p>
                    <p>服务支持</p>
                    <p> 法律和隐私</p>
                </div>
                <div class="me_footys">
                    <h5>帮助中心</h5>
                    <p><img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cDovLzVlZTFlY2Y0YzVkOTEudDc0LnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAyMC8wNi8zNDg1ODhmZDhhNGY2NmFlM2NhYzFkMWIxZGMzYmNkNy5qcGc_p_p100_p_3D.jpg" alt=""></p>
                </div>
            </div>
        </div>
        <!--  -->
    </div>
    <template id="no1">
        <div><div class="head">
            <div class="me_head">
                <div class="header">
                    <div class="head_text">
                        <div class="head_textl">
                            <h5>企业数字化平台</h5>
                            <p>打造企业级云原生PaaS+SaaS平台，帮助客户轻松用云、快速创新、持续迭代。</p>
                            <el-button type="danger" style="width: 143px;height: 45px;border-radius: 22.5px;font-size: 16px;margin-top: 35px;">免费体验</el-button>
                        </div>
                        <div class="head_textr" ref='div'>
                                <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNGE5MGQ0N2I3YWU3Mzg5NTg0ZDIyZTEyNmNlYjk4OWQucG5n.png" alt="">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  -->
            <div class="mb">
                <div class="me_mb">
                    <div class="me_mbt">
                        <h4>我们的目标</h4>
                        <p>当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为起飞页提供了海量精美网站模板和成品网站。</p>    
                    </div>
                </div>
                <div class="me_mbb">
                    <div class="me_mbbc">
                        <titlebox title="省时间" inco="el-icon-alarm-clock" text="您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素">
                        </titlebox>
                        <titlebox title="客制化" inco="el-icon-alarm-clock" text="您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素">
                        </titlebox>
                        <titlebox title="移动端友好" inco="el-icon-alarm-clock" text="您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素">
                        </titlebox>
                    </div>
                   
                </div>
            </div>
        <!--  -->
            <div class="jyb">
                <div class="me_jyb">
                    <div>
                        <p>看看我们的价值观</p>
                        <h4>进一步了解我们</h4>
                        <div><img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvMzc3NDBmNDFkNTYyOGI0ODc1NzcyNmUzYzQxZTU4YzgtODB4ODAucG5n.png" alt=""></div>
                    </div>
                </div>
            </div>
        <!--  -->
            <div class="js">
                <div class="me_js">
                    <div class="me_jst">
                        <div class="me_jstl">
                            <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvZmNmM2EzOGQ3OWE1MWU2NzE1MzlkMTYzMWE2OWJmOGMucG5n.png" alt="">
                        </div>
                        <div class="me_jstr">
                            <h4>软件平台核心优势</h4>
                            <div>
                                <el-tree
                                :data="data"
                                :props="defaultProps"
                                accordion
                                @node-click="handleNodeClick">
                                </el-tree>
                            </div>
                        </div>
                    </div>
                    <div class="me_jst" style="padding-top: 20px;">
                        <div class="me_jstr" style="padding-left: 0;">
                            <h4 style="margin-bottom: 20px;">为什么要选择我们的服务</h4>
                            <div><div style="font-size: 14px;line-height: 20px;margin-bottom: 30px;">当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。</div></div>
                            <titlep inco="el-icon-check" text="当今最领先的响应式自助建站平台"></titlep>
                            <titlep inco="el-icon-check" text="我们的流线式网页布局设计方案和可视化图文内容编辑模式"></titlep>
                            <titlep inco="el-icon-check" text="网站制作和维护成为一件轻松惬意的事"></titlep>
                            <titlep inco="el-icon-check" text="我们的流线式网页布局设计方案"></titlep>
                            <titlep inco="el-icon-check" text="当今最领先的响应式自助建站平台"></titlep>
                        </div>
                         <div class="me_jstl">
                            <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvMTZhMmY5NDQ2ZTI5NGVjNjU0ODhkNTdjNDJmZWU4N2MucG5n.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        <!--  -->
            <div class="dz">
                <div class="me_dz">
                    <titlehead title="企业专属定制" text="您可以尽情向我们的设计部门提出您的需求，大胆的选择您的主题色"></titlehead>
                    <div class="me_dzb">
                        <div class="me_dzbt" v-for="i in 3">
                            <div>
                                <h5>基础版</h5>
                                <p><span>￥59 </span>/年</p>
                            </div>
                            <div>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <titlep inco="el-icon-check" text=" 赠送国际域名  "></titlep>
                                <div>立即购买</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <!--  -->
            <div class="wmtd">
                <div class="me_wmtd">
                    <titlehead title="我们的团队" text="您可以尽情向我们的设计部门提出您的需求，大胆的选择您的主题色"></titlehead>
                    <div class="me_wmtddiv" v-for="i in 3">
                        <img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNjhmYmM1NDkxYjM3YzE4OTNmNmNkZDQ5YmQ4ODEyNjYtNTMzeDQwMC5qcGc_p_p100_p_3D.jpg" alt="">
                        <div>张 迪特</div>
                        <div>设计师</div>
                        <div><span><i class="inco el-icon-s-order"></i></span>
                        <span><i class="inco el-icon-s-order"></i></span>
                        <span><i class="inco el-icon-s-order"></i></span>
                        <span><i class="inco el-icon-s-order"></i></span></div>
                    </div>
                </div>
            </div>
        <!--  -->
            <div class="zchl">
                <div class="me_bzchl">
                    <div class="me_zchl">
                        <titlehead title="注册并获得折扣" text="您可以双击这里或者点击编辑按钮来修改内容您还可以添加图标按钮图片等常用元素"></titlehead>
                        <el-button type="danger" plain>免费试用</el-button>
                    </div>
                </div>
                
            </div>
        <!--  -->
           
        </div>
    </template>
    <template id="no2">
        <div>
            <div class="gsjj">
                <div class="me_jst" style="padding-top: 20px;">
                    <div class="me_jstr" style="padding-left: 0;width: 35%;margin-right: 10%;">
                        <h4 style="margin-bottom: 20px;">公司简介</h4>
                        <div><div style="font-size: 15px;line-height: 20px;margin-bottom: 30px;">当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。
                        </div>
                        <div style="font-size: 15px;line-height: 20px;margin-bottom: 30px;">专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为起飞页提供了海量精美网站模板和成品网站。
                        </div>
                        </div>
                    </div>
                     <div class="me_jstl" style="width: 50%;">
                        <img style="width: 100%;animation: none;" src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNGUwNGMyZjFjNDk2ZDU4Y2FiZTc4MTFmNTA1YmY4N2YuanBn.jpg" alt="">
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="ywzz">
                <titlehead title="我们的业务宗旨是客户的满意"></titlehead>
                <div class="tu"><img src="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvNTIyMDZmYTJiZDE3Mjg4NDBhMTQzZTg1N2JhYzI3Y2YucG5n.png" alt=""></div>
                
            </div>
            

            <!--  -->
            
        </div>
    </template>
    <template id="no3">
        <div>
            <div class="xinw">
                <div class="me_xinw">
                    <div class="me_xinwl">
                        <titlexinw title="大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?" time="发布日期：2019.04.01 分类：动态资讯 " text="设计师必备歌单： "></titlexinw>
                        <titlexinw title="立足大湾区、链接长三角,京东快递航空战略新版图" time="发布日期：2019.04.01 分类：动态资讯 " text="客户：先谢谢你了，能想象一下一块圆形的黑金属在一点钟方向向着八点钟的位子以闪电的弧度裂开然后黑金属两瓣分别上下稍微分离的感觉吗？" hd="设计狮：您这个好复杂啊，有草图吗？"></titlexinw>
                        <titlexinw title="推广新能源车辆走绿色发展" time="发布日期：2019.04.01 分类：动态资讯 " text="当年刚学打篮球的时候，疯狂地迷恋上了乔丹，然后迷恋上了NIKE，更熟记了NIKE的那句广告语：JUST DO IT。然后…我从此进入了IT行业。。。  "></titlexinw>
                        <titlexinw title="构建“互联网 ”智慧物流矩阵运输公司运用大数据系统平台提升效率50%纪实" time="发布日期：2019.04.01 分类：动态资讯 " text='前阵子，公司一个人遇到个记者，记者问他："看您身板硬朗、精神矍铄，请问您养生秘诀是什么？"
                        答：在设计行业坚持十年以上，熬夜不休假，保持烟酒，心态要好'></titlexinw>
                        <titlexinw title="电子商务促进快递行业发展" time="发布日期：2019.04.01 分类：动态资讯 " text="面试官：面试设计师的？"></titlexinw>
                    </div>
                    <div class="me_xinwr">
                        <input type="text" >
                        <h4>热门资讯</h4>
                        <p>大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?</p>
                        <p>立足大湾区、链接长三角,京东快递航空战略新版图</p>
                        <p>电子商务促进快递行业发展</p>
                        <p>推广新能源车辆走绿色发展</p>
                        <p>“世界工厂”东莞物流逐步畅通 道路货运、物流企业复工率达9成</p>
                    </div>
                </div>
            </div>
            
            

            <!--  -->
            
        </div>
        
    </template>
    <template id="no4">
        <div>
            <div class="lxxx">
                <h4>联系信息</h4>
               <span>--------</span>
               
            </div>
            <div class="lxxxb">
                <titlelxxxb text="中国 广东省 深圳市" con="南京路双港码头6楼" inco="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvM2U4NWNlMTc5YjUxYmYyN2M1MDRiYzViMjY0NTlmNGMtNzB4NzAucG5n.png"></titlelxxxb>
                <titlelxxxb text="(1239) 222.444" con="example@example.org" inco="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvM2U4NWNlMTc5YjUxYmYyN2M1MDRiYzViMjY0NTlmNGMtNzB4NzAucG5n.png"></titlelxxxb>
                <titlelxxxb text="Mon-Fri: 8:00 - 16:00" con="Sat-Sun: Closed" inco="https://ccdn.goodq.top/caches/6e50d6492e3bae10ff0a5a6d86bc5093/aHR0cHM6Ly81ZWUxZWNmNGM1ZDkxLnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDYvM2U4NWNlMTc5YjUxYmYyN2M1MDRiYzViMjY0NTlmNGMtNzB4NzAucG5n.png"></titlelxxxb>
                
            </div>
            <div class="sslx">
                <div class="me_sslx">
                    <div class="lxxx">
                        <h4>随时联系我们</h4>
                       <span>--------</span>
                       
                    </div>
                    <div class="me_sslxyj">
                        <input type="text" placeholder="姓名">
                        <input type="text" placeholder="邮箱">
                        <textarea name="" id="" cols="30" rows="10" placeholder="内容"></textarea>
                    </div>
                </div>
            </div>

            <!--  -->
            
        </div>
        
        
    </template>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./index.js"></script>
<script>
   
    let no1 = {
        template:'#no1',
        data() {
      return {
        data: [{
          label: '我们是谁',
          children: [{
            label: '当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案、自由拖拽的可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。',
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
          }]
        },{
          label: '一级 2',
          children: [{
            label: '二级 2-1',
          }]
        },],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
    }
    let no2 = {
        template:'#no2'
    }
    let no3 = {
        template:'#no3'
    }
    let no4 = {
        template:'#no4'
    }
    let routes = [
        {path:'/',name:'no1',component:no1},
        {path:'/no2',name:'no2',component:no2},
        {path:'/no3',name:'no3',component:no3},
        {path:'/no4',name:'no4',component:no4},
    ]
    let router = new VueRouter({
        routes
    })
   
    new Vue({
        el:'.box',
        modules: {
           arr:[{}],
        },
        router 
        

    })
</script>
</html>